<template>
    <div>
        <el-form :model="queryParams" ref="monitor-log-queryForm" size="small" :inline="true" v-show="showSearch">
            <div class="app-space-between">
                <div class="app-space-between-left">
                    <el-form-item label="" prop="json">
                        <el-input v-model="queryParams.json" style="width: 350px;"
                            placeholder="请输入内容关键字(最多32个字)"></el-input>
                    </el-form-item>
                </div>
                <div class="app-space-between-right">
                    <el-button type="primary" size="mini" @click="getList">搜索</el-button>
                    <el-button size="mini" @click="resetQuery">重置</el-button>
                </div>
            </div>
        </el-form>

        <el-row class="mb8">
            <el-col :span="1.5" style="margin-right: 10px">
                <el-button type="primary" plain size="mini" @click="handleClean">清空数据</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <div style="height: 16px"></div>

        <el-table v-loading="loading" :data="postList">|
            <el-table-column show-overflow-tooltip label="内容" align="center" prop="json" />
            <el-table-column show-overflow-tooltip label="时间" width="200" align="center">
                <template slot-scope="scope">
                    {{ scope.row.createTime | YYYY_MM_DD }}
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { listQueryLog, cleanQueryLog } from "@/api/monitor/index";
import { dictMonitor } from "@/api/dict";
export default {

    data() {
        return {
            loading: true,
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 岗位表格数据
            postList: [],
            metaId:null,
            // 弹出层标题
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                json: ""
            },
        };
    },
    async mounted() {
        let res = await dictMonitor();
        this.metaId = res.resultValue.metaId;
        this.selectIdData = res.resultValue.meta;
        this.resetQuery()
    },
    methods: {
        async getList() {
            try {
                let res1 = await listQueryLog("", this.queryParams);
                console.log("查看内容：", res1)
                this.postList = res1.resultValue.data;
                this.total = res1.resultValue.total;
                this.loading = false;
            } catch (e) {
                this.loading = false;
            }
        },
        handleClean() {
            this.$confirm('确认清空日志？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await cleanQueryLog({ id: this.metaId });
                this.$message.success("操作成功");
            })
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.$refs["monitor-log-queryForm"].resetFields();
            this.getList();
        },
    },
};
</script>
<style lang="scss" scoped></style>